.sidenav {
  background: $sidenav-bg;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
  display: block;
  font-size: $sidenav-font-size;
  font-weight: $sidenav-font-weight;
  height: 100%;
  left: 0;
  position: fixed;
  overflow: auto;
  transform: translate(-$sidenav-width - 6, 0);
  transition: transform .3s;
  top: 0;
  width: $sidenav-width;
  z-index: $sidenav-z-index;

  &.show {
    transform: translate(0, 0);
  }
}
.sidenav-brand {
  background: $sidenav-brand-bg;
  border-bottom: 1px solid $sidenav-brand-border;
  color: $sidenav-brand-color;
  font-size: $sidenav-font-size * 1.5;
  font-weight: bold;
  line-height: $sidenav-font-size * 2;
  padding: $sidenav-padding * 1.25 ($sidenav-padding - ($sidenav-padding - $sidenav-font-size)) * 1.5 ($sidenav-padding * 1.25) - 1;
}
.sidenav-header {
  background: $sidenav-header-bg;
  border-bottom: 1px solid $sidenav-header-border;
  color: $sidenav-header-color;
  font-size: $sidenav-font-size * 1.2;
  line-height: $sidenav-font-size * 2;
  margin: 0;
  padding: $sidenav-padding ($sidenav-padding - ($sidenav-padding - $sidenav-font-size)) * 1.5 $sidenav-padding - 1;

  small {
    display: block;
    font-size: $sidenav-font-size * .9;
    line-height: $sidenav-font-size;
  }
}
.sidenav-menu {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: block;
    position: relative;
  }
  a {
    background: $sidenav-link-bg;
    color: $sidenav-color;
    display: block;
    line-height: $sidenav-padding * 1.5;
    padding: $sidenav-padding ($sidenav-padding - ($sidenav-padding - $sidenav-font-size) * 2) * 2;
    text-decoration: none;

    &:hover {
      background: $sidenav-link-bg-hover;
    }
    &.active {
      color: $sidenav-color-active;

      .sidenav-link-icon,
      .sidenav-dropdown-icon {
        color: $sidenav-color-active;
      }
    }
  }
}
.sidenav-link-icon {
  color: $sidenav-color-icon;
  display: block;
  height: $sidenav-padding * 1.5;
  left: ($sidenav-padding - ($sidenav-padding - $sidenav-font-size)) * 1.5;
  position: absolute;
  text-align: center;
  top: $sidenav-padding;
  width: $sidenav-padding * 1.5;
}
.sidenav-link-title {
  display: block;
  padding: 0 $sidenav-padding 0 $sidenav-padding * 2.5
}
.sidenav-dropdown {
  border-bottom: 1px solid $sidenav-dropdow-border;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;

  a {
    background: $sidenav-dropdow-bg;
    padding-left: ($sidenav-padding - ($sidenav-padding - $sidenav-font-size)) * 4.5;

    &:hover {
      background: $sidenav-dropdow-bg-hover;
    }
  }
  li:first-child a {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  }
}
.sidenav-dropdown-icon {
  color: $sidenav-color-icon;
  display: none;
  height: $sidenav-padding;
  right: $sidenav-padding;
  position: absolute;
  text-align: center;
  top: $sidenav-padding;
  width: $sidenav-padding;

  &.show {
    display: block
  }
}
.sidenav-overlay {
  background: $sidenav-overlay-bg;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: $sidenav-z-index - 1
}
.sidenav-no-scroll {
  overflow: hidden !important
}
